import React from 'react';
import Link from '@docusaurus/Link';
import styles from './TemplatesGrid.module.css';

interface Template {
  id: string;
  title: string;
  description: string;
  category: string;
  downloadUrl: string;
  githubUrl: string;
  icon: string;
}

const templates: Template[] = [
  {
    id: 'miniprogram',
    title: '微信小程序',
    description: '小程序基础配置，包含云开发集成',
    category: '新项目推荐',
    downloadUrl: 'https://static.cloudbase.net/cloudbase-examples/miniprogram-cloudbase-miniprogram-template.zip?v=2025053001',
    githubUrl: 'https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/miniprogram/cloudbase-miniprogram-template',
    icon: '📱',
  },
  {
    id: 'react',
    title: 'React Web 应用',
    description: '现代化的 React 全栈应用模板',
    category: '新项目推荐',
    downloadUrl: 'https://static.cloudbase.net/cloudbase-examples/web-cloudbase-react-template.zip?v=2025053001',
    githubUrl: 'https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/web/cloudbase-react-template',
    icon: '⚛️',
  },
  {
    id: 'vue',
    title: 'Vue Web 应用',
    description: '现代化的 Vue 全栈应用模板',
    category: '新项目推荐',
    downloadUrl: 'https://static.cloudbase.net/cloudbase-examples/web-cloudbase-vue-template.zip?v=2025053001',
    githubUrl: 'https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/web/cloudbase-vue-template',
    icon: '💚',
  },
  {
    id: 'uniapp',
    title: 'UniApp 跨端应用',
    description: '可编译到 H5 和微信小程序',
    category: '新项目推荐',
    downloadUrl: 'https://static.cloudbase.net/cloudbase-examples/universal-cloudbase-uniapp-template.zip?v=2025053001',
    githubUrl: 'https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/universal/cloudbase-uniapp-template',
    icon: '🌐',
  },
  {
    id: 'rules',
    title: 'AI 规则通用模板',
    description: '内置 CloudBase AI 规则和 MCP',
    category: '新项目推荐',
    downloadUrl: 'https://static.cloudbase.net/cloudbase-examples/web-cloudbase-project.zip',
    githubUrl: 'https://github.com/TencentCloudBase/awesome-cloudbase-examples/tree/master/web/cloudbase-project',
    icon: '🤖',
  },
];

export default function TemplatesGrid() {
  return (
    <div className={styles.container}>
      <div className={styles.grid}>
        {templates.map((template) => (
          <div key={template.id} className={styles.card}>
            <div className={styles.content}>
              <div className={styles.header}>
                <span className={styles.icon}>{template.icon}</span>
                <h3 className={styles.title}>{template.title}</h3>
              </div>
              <p className={styles.description}>{template.description}</p>
              <div className={styles.actions}>
                <a
                  href={template.downloadUrl}
                  className={styles.downloadButton}
                  target="_blank"
                  rel="noopener noreferrer"
                  download
                >
                  <span className={styles.buttonIcon}>⬇️</span>
                  下载
                </a>
                <Link
                  to={template.githubUrl}
                  className={styles.githubButton}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <span className={styles.buttonIcon}>🔗</span>
                  GitHub
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

